.row {
    --bg-color: var(--grey200);
    --hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
    --range-color: light-dark(var(--grey900), #d1cfc7);
    --crate-color: light-dark(var(--grey700), #d1cfc7);
    --placeholder-opacity: 0.35;
    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);

    display: flex;
    align-items: center;
    position: relative;
    font-size: 18px;
    padding: var(--space-s) var(--space-m);
    background-color: light-dark(white, #141413);
    border-radius: var(--space-3xs);
    box-shadow: var(--shadow);
    transition: all var(--transition-slow);

    &:hover, &.focused {
        background-color: var(--hover-bg-color);
        transition: all var(--transition-instant);
    }

    &.focused {
        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
    }

    &.optional {
        --range-color: light-dark(var(--grey600), var(--grey600));
        --crate-color: light-dark(var(--grey600), var(--grey600));
        --placeholder-opacity: 0.15;
    }

    [title], .features-label {
        position: relative;
        z-index: 1;
        cursor: help;
    }

    @media only screen and (max-width: 550px) {
        display: block
    }
}

.tooltip {
    word-break: break-all;
}

.range-lg, .range-sm {
    margin-right: var(--space-s);
    min-width: 100px;
    color: var(--range-color);
    font-variant: tabular-nums;
}

.range-lg {
    @media only screen and (max-width: 550px) {
        display: none;
    }
}

.range-sm {
    @media only screen and (min-width: 551px) {
        display: none;
    }
}

.right {
    flex-grow: 1;
}

.link {
    color: var(--crate-color);
    font-weight: 500;
    margin-right: var(--space-s);
    outline: none;

    &:hover {
        color: var(--crate-color);
    }

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

.optional-label, .features-label {
    color: var(--grey600);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 13px;
    margin-right: var(--space-s);

    :global(a) {
        position: relative;
        color: var(--grey600);

        &:hover {
            color: var(--grey900);
        }
    }

    :global(svg) {
        height: 1em;
        width: auto;
        margin-right: var(--space-4xs);
        margin-bottom: -.1em;
    }

    .tooltip {
        text-transform: none;
        letter-spacing: normal;
    }

    @media only screen and (max-width: 550px) {
        display: block;
        margin-top: var(--space-xs);
    }
}

.feature-list {
    padding: 0;
    margin: var(--space-2xs) var(--space-3xs);
    list-style: none;

    :global(svg) {
        height: 1em;
        width: auto;
        margin-right: 2px;
        margin-bottom: -.1em;
    }
}

.description {
    margin-top: var(--space-xs);
    color: var(--crate-color);
    font-size: 90%;
    line-height: 1.5;
}

.description-placeholder {
    height: 1em;
    width: 70%;
    border-radius: var(--space-3xs);
    opacity: var(--placeholder-opacity);
}
